<template>
  <div id="contentRight">
    <section id="sec1">
      <p class="guide">
        <router-link to="/contractList">合约列表&nbsp;&nbsp;>&nbsp;</router-link>
        <span>续单</span>
      </p>
      <table>
        <thead>
          <tr>
            <td>名称</td>
            <td>金额</td>
            <td>到手总算力</td>
            <td>合约期限</td>
            <td>状态</td>
            <td>开挖时间</td>
            <td>下单时间</td>
            <td>锁定时间</td>
          </tr>
        </thead>
        <tbody>
         <tr>
           <th>
             <span>{{machine.productName}}</span>
           </th>
           <th>
             <span>{{machine.state2 == 2 ? machine.continueTotalDeposit : machine.totalDeposit}}{{machine.payUnitName}}</span>
           </th>
           <th>
             <span class="pointer" @mouseenter="showItem1(machine , $event)" @mouseout="showWin1 = false">
               {{machine.handsPower}}T
             </span>
           </th>
           <th><span>{{machine.regularDateNum}}天</span></th>
           <th><span>{{machine.workText}}</span></th>
           <th><span>{{machine.startTime}}</span></th>
           <th><span>{{machine.operateTime}}</span></th>
           <th><span>{{machine.endTime}}</span></th>
         </tr>
        </tbody>
      </table>
    </section>
    <section id="sec2">
      <div class="d1">
        <span class="title">续期方式:</span>
        <div class="d2">
          <label :for="'day'+item.days" v-for="(item , index ) in daysArr" v-if="item.days > 0">
            <input v-model="checkedDaysIndex" :value="index" type="radio" :id="'day'+item.days" name="dayType" :checked="index == checkedDaysIndex">
            <span class="days">{{item.days}}天</span>
          </label>
        </div>
      </div>
      <div class="d2">
        <p class="title">续期订单信息：</p>
        <table>
          <tbody border="0" cellspacing="0">
            <tr>
              <td>
                <p class="p1">续期金额</p>
                <p class="p2">{{machine.standardPrice}}{{machine.payUnitName}}</p>
              </td>
              <td>
                <p class="p1">到手总算力</p>
                <p class="p2"><span class="pointer" @mouseenter="showNewPowerWin($event)" @mouseout="showWin1 = false">{{handsPower}}T</span></p>
              </td>
              <td>
                <p class="p1">合约期限</p>
                <p class="p2"><span v-if="daysArr.length > 0">{{daysArr[checkedDaysIndex].days}}</span>天</p>
              </td>
              <td>
                <p class="p1">续单补差价</p>
                <p class="p2">
                  <span class="pointer"  @mouseenter="showDiffencePrice($event)" @mouseout="showWin2 = false">
                    {{machine.differencePrice}}{{machine.payUnitName}}
                  </span>
                </p>
              </td>
              <td>
                <p class="p1">锁定时间</p>
                <p class="p2"><span>{{lockTime}}</span></p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <p class="p3">
        <button @click="sub">立即续期</button>
      </p>
    </section>
    <!--展示算力包的power信息-->
    <div class="abWin" v-if="showWin1" :style="win1Style">
      <span class="top">
        <span>总算力</span>
        <span>{{win1Data.totalPower}}T</span>
      </span>
      <span class="line">
        <span>
          <span class="left">基础算力</span>
          <span class="right">{{win1Data.basePower}}T</span>
        </span>
        <span>
          <span class="left">浮动算力</span>
          <span class="right">{{win1Data.floatPower}}T</span>
        </span>
        <span>
          <span class="left">达标算力</span>
          <span class="right">{{win1Data.standardPower}}T</span>
        </span>
        <span>
          <span class="left">期货算力</span>
          <span class="right">{{win1Data.futuresPower}}T</span>
        </span>
        <span>
          <span class="left">定期算力</span>
          <span class="right">{{win1Data.regularPower}}T</span>
        </span>
        <span>
          <span class="left">邀请算力</span>
          <span class="right">{{win1Data.invitePower}}T</span>
        </span>
      </span>
    </div>
    <!--金额差价弹窗-->
    <div class="abWin" v-if="showWin2" :style="win2Style">
      <span class="line">
          <span>
            <span class="left">原有金额</span>
            <span class="right">{{machine.oldOrderMoney}}{{machine.payUnitName}}</span>
          </span>
          <span>
            <span class="left">现有金额</span>
            <span class="right">{{machine.standardPrice}}{{machine.payUnitName}}</span>
          </span>
      </span>
    </div>
    <!--确认续单弹窗-->
    <confirm-dialog ref="cfDl" cfTitle="续单提示" @confirm="confirmRenewal"/>
    <confirm-dialog ref="addDialog" cfTitle="提示"  @confirm="$router.push({path : '/recharge'})"/>
  </div>
</template>
<script>
  import { orderDetail , getOrderContinueMes , leftMoney , renewalOrder} from '../http/api';
  export default {
    name : 'renewalOrder',
    inject : ['reload'] ,
    data(){
      return{
        orderId : null,//矿机订单id
        machine : {}, //矿机信息
        win1Data : {
          totalPower : 0,
          basePower : 0 ,
          floatPower : 0,
          standardPower : 0,
          futuresPower : 0,
          regularPower : 0,
          invitePower : 0,
        },//弹窗1数据
        showWin1 : false,//显示弹窗1
        win1Style : {left : 0 ,right : 0}, //弹窗1位置
        showWin2 : false,//显示弹窗2
        win2Style : {left : 0 ,right : 0}, //弹窗2位置
        daysArr : [], //续单天数数组
        checkedDaysIndex : 1,//选择的续单的天数index
        /*------选择续单后信息------*/
        handsPower : 0,//到手总算力
        lockTime : '--' , //锁定时间
        newFloatPower : 0 ,
        newRegularNum : 0,
        /*------余额------*/
        myMoney : 0,
        myUsdt : 0,
      }
    },
    mounted() {
      let query =  this.$route.query;
      let orderId = query.orderId;
      if(!orderId){
        require('../common/js/toast').toast('页面地址未传入订单id');
        this.$router.go(-1);
        return;
      }
      this.orderId = orderId;
      this.loadPage();
    },
    components:{
      ConfirmDialog : resolve => { require(['../components/ConfirmDialog'], resolve) },/*确认弹窗*/
    },
    watch:{
      checkedDaysIndex(index){
        let thiz = this;
        let daysArr = this.daysArr;
        let getChooseData = daysArr[index].days;
        let machine = this.machine;
        var monthPower = {
          arrRegularPower: daysArr[index].regularPower,
          arrFloatPower: daysArr[index].floatPower
        };
        let regularNum = this.accMul(monthPower.arrRegularPower, machine.basePower);
        let floatPowerNum = this.accMul(monthPower.arrFloatPower, machine.basePower);
        if (machine.isFloatPower == 0) {
          floatPowerNum = 0;
        }
        this.newFloatPower = floatPowerNum;
        this.newRegularNum = regularNum;
        let endTime = machine.endTime;
        endTime =endTime ? Number(new Date(endTime)) : 0;
        let newLockDate = null;//新的锁定到期时间
        if (Number(new Date()) > endTime) {
          newLockDate = this.addDaysFromNow(getChooseData)
        } else {
          newLockDate = this.addDaysFromDesignDate(endTime , getChooseData)
        }
        thiz.lockTime = newLockDate;
        let newToatalPower = thiz.accMul(
          thiz.accSub( thiz.accSub( thiz.accAddMore(machine.computingPower, regularNum, floatPowerNum), machine.regularPower), machine.floatPower),
          machine.num
        );//新到手算力
        this.handsPower = thiz.numSlice(newToatalPower, 2)
      }
    },
    methods:{
      loadPage(){
        let thiz = this;
        let https = [
          orderDetail({orderId : this.orderId , noLoading : true}).then(res => {
            if(res.code == 200){
              let data = res.data;
              let standardPrice = thiz.accMoreMul(data.basePower, 425, data.num);//标准价格
              if (data.paymentCurrencyCode != "USDT") {
                standardPrice = Number(thiz.accMoreMul(data.basePower, 3000, data.num));
              }
              standardPrice = standardPrice == 42.5 ? 43 : standardPrice;
              data.payUnitName = data.paymentCurrencyCode == "BCNY" ? "OTC余额" : data.paymentCurrencyCode;//金额单位名称
              data.standardPrice = standardPrice;
              let oldOrderMoney = data.totalDeposit;//原订单总金额
              data.oldOrderMoney = oldOrderMoney;
              data.needMonney = this.accSub(standardPrice, oldOrderMoney);
              let differencePrice = thiz.accSub(standardPrice, oldOrderMoney); //金额差价
              data.differencePrice = differencePrice;
              let win1Data = this.getPbHandPower(data);
              data.handsPower = win1Data.totalPower;
              thiz.machine = data;
              thiz.win1Data = win1Data;
            }
            return res;
          }),
          getOrderContinueMes({noLoading : true}).then(res => {
            if(res.code == 200){
              thiz.daysArr = res.data;
            }
            return res;
          }),
          leftMoney({noLoading : true}).then(res => {
            let data = res.data;
            thiz.myMoney = thiz.numSlice(data.lists.CNY, 2);
            thiz.myUsdt = thiz.numSlice(data.lists.USDT, 4);
          })
        ];
        this.PromiseAll(https , res => {
          thiz.checkedDaysIndex = 0;
        });
      },
      getPbHandPower(item){
        //获取普通的合约包到手算力
        let win1Data = {
          //totalPower : this.accMoreMul(item.basePower , item.num),
          basePower : this.accMoreMul(item.basePower , item.num), //基础算力
          floatPower : this.accMoreMul(item.floatPower, item.num),//浮动
          standardPower : this.accMoreMul(item.pePower || 0, item.num),//达标
          futuresPower : this.accMoreMul(item.futuresPower, item.num),//期货
          regularPower : this.accMoreMul(item.regularPower, item.num),//定期
          invitePower : 0,//邀请
        };
        let result = 0 , thiz = this;
        this.for(win1Data , ( item , key ) => {
          result = thiz.accAddMore( result , item);
        });
        win1Data.totalPower = result;
        return win1Data;
      },
      showItem1(item , e ){
        let x = e.clientX;
        let y = e.clientY;
        this.win1Style = {left : x+20+'px' , top : y-30 +'px'};
        this.win1Data = this.getPbHandPower(item);
        this.showWin1 = true;
      },
      showDiffencePrice(e){
        let x = e.clientX;
        let y = e.clientY;
        this.win2Style = {left : x+20+'px' , top : y-10 +'px'};
        this.showWin2 = true;
      },
      showNewPowerWin(e){
        let x = e.clientX;
        let y = e.clientY;
        this.win1Style = {left : x+20+'px' , top : y-30 +'px'};
        let machine = this.machine;
        let item = {
          basePower : machine.basePower , floatPower : this.newFloatPower ,  standardPower : machine.pePower ,
          futuresPower : machine.futuresPower ,regularPower:this.newRegularNum , num : machine.num
        };
        this.win1Data = this.getPbHandPower(item);
        this.showWin1 = true;
      },
      confirmRenewal(){
        let param = {
          orderId: this.orderId,
          type: this.daysArr[this.checkedDaysIndex].days
        };
        let thiz = this;
        renewalOrder(param).then(res => {
          if(res.code == 200){
            require('../common/js/toast').toast('续单成功');
            thiz.timeout(res => {
              thiz.$router.push({path : '/contractList'});
            },1000)
          }
        })
      },
      sub(){
        let machine = this.machine;
        let needMonney = machine.needMonney;
        if ((Number(needMonney) > 0 && Number(needMonney) > Number(this.myMoney) && machine.paymentCurrencyCode != "USDT") || (Number(needMonney) > 0
          && Number(needMonney) > Number(this.myUsdt) && machine.paymentCurrencyCode == "USDT")){
          //余额不足
          this.$refs.addDialog.changeToast('您可用余额不足，是否立即去充值？');
          this.$refs.addDialog.dialogShow();
        }else{
          let dialogMsg = `您确定要续单${this.daysArr[this.checkedDaysIndex].days}天吗？`;
          this.$refs.cfDl.changeToast(dialogMsg);
          this.$refs.cfDl.dialogShow();
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #sec1{
    >table{
      width: 100%;text-align: left;margin-top: 15px;
      th{
        font-weight: 500;font-size: 14px;color: #262626;
        >span{
          display: inline-block;height: 100%;
        }
      }
      >thead{
        color: #999999;font-size: 14px;
        tr>td{
          padding: 25px 0;
          &:last-child{
            text-align: right;
          }
        }
      }
      >tbody{
        th{
          padding: 24px 6px;padding-top: 0px;color: #595959;font-size: 14px;vertical-align: text-top;
        }
        tr>th:first-child{
          max-width: 220px;
        }
        >tr>th:last-child{
          text-align: right;
        }
        .pointer{
          .colorYellow;text-decoration: underline;
          &:hover{
            cursor: pointer;
          }
        }
        .setting{
          >span{
            display: inline-block;width: 100%;text-align: right;margin-top: 15px;
            &:first-child{
              margin-top: 0px;
            }
          }
        }
      }
    }
  }
  #sec2{
    margin-top: 10px;min-height: 560px;
    .title{
      color: #999;font-size: 14px;
    }
    >.d1{
      overflow: hidden;
      >.title{
        float: left;line-height: 16px;
      }
      >.d2{
        overflow: hidden;float: left;
        >label{
          .radioLabel;margin-left: 50px;color: #595959;
          >span:before{
            border-color: #BFBFBF;
          }
          &:first-child{
            margin-left: 20px;
          }
        }
      }
    }
    >.d2{
      >.title{
        padding-top: 32px;padding-bottom: 24px;
      }
      >table{
        width: 100%;background: #F8F8F8;.borderRadius;padding: 28px;text-align: left;padding-bottom: 36px;
        td{
          &:last-child{
            max-width: 60px;
          }
          >.p1{
            color: #999999;font-size: 14px;
          }
          >.p2{
            color: #595959;font-size: 14px;padding-top: 18px;
          }
        }
        .pointer{
          .colorYellow;text-decoration: underline;
          &:hover{
            cursor: pointer;
          }
        }
      }
    }
    >.p3{
      padding-top: 27px;
      button{
        .submit;width: 160px;height: 38px;line-height: 38px;font-size: 14px;
      }
    }
  }
</style>
